<script setup lang='ts'>
import { onClickOutside } from "@vueuse/core";
import { ref } from "vue";
const {modelValue}= defineProps<{
  modelValue:boolean
}>()
const emit=defineEmits<{
  (event: 'update:modelValue', val: boolean): void
}>()
const close=()=>{
  emit('update:modelValue',false)
}
const target=ref(null)
onClickOutside(target,()=>{
  close()
})
</script>

<template>
    <div ref="target" class="dialog" v-if="modelValue" >
      <span class="close iconfont icon-close-new" @click="close"></span>
        <div class="content">
          对话内容
          <slot/>
        </div>
        <div class="btn">
          <button class="btn1">确定</button>
        <button class="btn2">取消</button>
        </div>
    </div>
</template>

<style lang='less' scoped>
.close{
  margin-left: 570px;
  margin-top: 20px;
  cursor: pointer;
}
.dialog{
  text-align: center;
  margin: 0 auto;
  width: 600px;
  height: 450px;
  background-color: skyblue;
}
.btn{
  margin-top: 300px;
  button{
    width: 100px;
    height: 40px;
  }
  .btn1{
    margin-right: 200px;
  }
}
</style>